// 审计总体情况
import { useRef, useEffect } from "react"
import * as am4charts from "@amcharts/amcharts4/charts"
import * as am4core from "@amcharts/amcharts4/core"

const AuditInfo = ({
  auditSummary = {},
  auditTypesPieChart = {},
  auditCategoriesPieChart = {}
}) => {
  const chartRef1 = useRef(null)
  const myChart1 = useRef(null)
  const chartRef2 = useRef(null)
  const myChart2 = useRef(null)

  const createChart = (ref, myChart, data) => {
    if (myChart.current) return
    const chart = am4core.create(ref.current, am4charts.PieChart3D)
    chart.hiddenState.properties.opacity = 0 // this creates initial fade-in
    chart.width = am4core.percent(100)

    // 图例配置
    chart.legend = new am4charts.Legend()
    chart.legend.position = "right"
    chart.legend.width = 180
    chart.legend.height = am4core.percent(60)

    chart.data = data
    chart.angle = 60
    chart.depth = 10
    chart.fontSize = 12
    chart.tooltip.label.fontSize = 12
    chart.logo.disabled = true

    const series = chart.series.push(new am4charts.PieSeries3D())
    series.dataFields.value = "value"
    series.dataFields.category = "name"
    series.colors.list = data.map((item) => am4core.color(item.color))

    series.ticks.template.stroke = am4core.color("#000000")
    series.ticks.template.strokeOpacity = 0.8

    series.labels.template.disabled = true

    // 使指示线颜色与对应饼块一致
    series.ticks.template.adapter.add("stroke", function (fill, target) {
      if (target.dataItem && target.dataItem.slice) {
        return target.dataItem.slice.fill
      }
      return fill
    })
    series.radius = am4core.percent(110)

    series.slices.template.states.getKey("active").properties.distance = 20 // 分离距离
    series.slices.template.states.getKey(
      "active"
    ).properties.shiftDistance = 1.6 // 3D高度变化
  }

  // 审计总览
  useEffect(() => {
    if (!myChart1.current) {
      createChart(chartRef1, myChart1, auditCategoriesPieChart.data)
    }
  }, [auditCategoriesPieChart.data])

  // 自审次数
  useEffect(() => {
    if (!myChart2.current) {
      createChart(chartRef2, myChart2, auditTypesPieChart.data)
    }
  }, [auditTypesPieChart.data])

  return (
    <div className="text-[14px] h-[263px] mt-[15px] border-1 border-white rounded-[8px] p-[12px]">
      <div
        className="w-[365px] h-[36px] leading-[36px]"
        style={{
          backgroundImage: `url('assistant-decision/base-title_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        <span className="ml-[30px] text-white text-[16px] font-[600]">
          审计总体情况
        </span>
      </div>
      <div className="mt-[20px] flex items-center justify-between">
        <div className="w-[365px]">
          <div
            className="flex items-center justify-between h-[32px] pl-[20px] pr-[20px]"
            style={{
              backgroundImage: `url('assistant-decision/audit-title_bg.png')`,
              backgroundRepeat: "no-repeat"
            }}
          >
            <div>审计总览</div>
            <div>{auditSummary.totalCount}次</div>
          </div>
          <div ref={chartRef1} className="w-full h-[180px]"></div>
        </div>
        <div className="w-[365px]">
          <div
            className="flex items-center justify-between h-[32px] pl-[20px] pr-[20px]"
            style={{
              backgroundImage: `url('assistant-decision/audit-title_bg.png')`,
              backgroundRepeat: "no-repeat"
            }}
          >
            <div>自审次数</div>
            <div>{auditSummary.selfAuditCount}次</div>
          </div>
          <div ref={chartRef2} className="w-full h-[180px]"></div>
        </div>
      </div>
    </div>
  )
}

export default AuditInfo
